<!--
 * @Author: gyp
 * @Date: 2020-06-04 16:34:45
 * @LastEditors: gyp
 * @LastEditTime: 2020-06-18 13:56:55
 * @Description: 警情数弹出框
 * @FilePath: \sy_kjxc_web\src\views\screen\components\policesituationDialog.vue
-->
<template>
  <div class="policeSituation">
    <el-dialog
      :title="'当日警情数'"
      :visible.sync="visible"
      @closed="onClosed"
      custom-class="blue"
    >
      <div class="content">
        <div class="statisWrap">
          <ul class="classifyWrap">
            <li>
              警情总数:
            </li>
            <li>
              刑事案件:
            </li>
            <li>
              纠纷案件:
            </li>
            <li>
              群众求助:
            </li>
            <li>
              治安案件:
            </li>
            <li>
              其他案件:
            </li>
          </ul>
          <ul class="classifyWrap">
            <li>
              {{ policeDatas.allCount }}
            </li>
            <li>
              {{ policeDatas.typeMap.XINGSHI }}
            </li>
            <li>
              {{ policeDatas.typeMap.JIUFEN }}
            </li>
            <li>
              {{ policeDatas.typeMap.QUNZHONGQIUZHU }}
            </li>
            <li>
              {{ policeDatas.typeMap.ZHIAN }}
            </li>
            <li>
              {{ policeDatas.typeMap.QITAJINGQING }}
            </li>
          </ul>
        </div>
        <div class="tableWrap">
          <el-table :data="policeDatas && policeDatas.alarmVoList" border class="blueTable" style="width:100%;max-height:6.16rem;overflow-y:auto;">
            <el-table-column type="index" label="序号" width="50"  />
            <el-table-column prop="platformName" label="单位"  min-width="80" />
            <el-table-column label="刑事案件"  min-width="50">
              <template slot-scope="scope">
                {{ scope.row.alarmTypeVoList && scope.row.alarmTypeVoList.filter(item => item.type === 110000) ?  scope.row.alarmTypeVoList.filter(item => item.type === 110000)[0].count : 0}}
              </template>
            </el-table-column>
            <el-table-column label="纠纷案件"  min-width="50">
              <template slot-scope="scope">
                {{ scope.row.alarmTypeVoList && scope.row.alarmTypeVoList.filter(item => item.type === 180000) ?  scope.row.alarmTypeVoList.filter(item => item.type === 180000)[0].count : 0}}
              </template>
            </el-table-column>
            <el-table-column label="群众求助"  min-width="50">
              <template slot-scope="scope">
                {{ scope.row.alarmTypeVoList && scope.row.alarmTypeVoList.filter(item => item.type === 150000) ?  scope.row.alarmTypeVoList.filter(item => item.type === 150000)[0].count : 0}}
              </template>
            </el-table-column>
            <el-table-column prop="alertType1Sum" label="治安案件"  min-width="50">
              <template slot-scope="scope">
                {{ scope.row.alarmTypeVoList && scope.row.alarmTypeVoList.filter(item => item.type === 120000) ?  scope.row.alarmTypeVoList.filter(item => item.type === 120000)[0].count : 0}}
              </template>
            </el-table-column>
            <el-table-column prop="alertType3Sum" label="其他案件"  min-width="50">
              <template slot-scope="scope">
                {{ scope.row.alarmTypeVoList && scope.row.alarmTypeVoList.filter(item => item.type === 990000) ?  scope.row.alarmTypeVoList.filter(item => item.type === 990000)[0].count : 0}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'policesituation-dialog',
  data () {
    return {
      visible: true,
      policeDatas: {
        allCount: 0,
        typeMap: {
          QITAJINGQING: 0,
          XINGSHI: 0,
          JIUFEN: 0,
          QUNZHONGQIUZHU: 0,
          ZHIAN: 0
        },
        alarmVoList: []
      }
    }
  },
  created () {
    this.getTodayalert();
  },
  methods: {
    getTodayalert () {
      this.$api.screen.todayAlert().then(res => {
        if (res.data.data) {
          this.policeDatas = res.data.data;
        }
      })
    },
    onClosed () {
      this.$emit('onSituationClose');
    }
  }
}
</script>

<style lang="less" scoped>
  .policeSituation{
    .content {
      display: flex;
      height: 100%;
      .statisWrap {
        width: 250px;
        height: 100%;
        border: 1px solid #1e6abc;
        box-shadow: 0 0 5px #1e6abc;
        display: flex;
        .classifyWrap {
          width:48%;
          font-size: 18px;
          color:#25f3e6;
          > li {
             width:100%;
             padding: 20px;
          }
        }
      }
      .tableWrap {
        width: calc(100% - 270px);
        margin-left: 20px;
        height: 100%;
      }
    }
  }
</style>
